<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <script src="d3.js"></script>
    <script>
        const svg = d3.select('body').append('svg');
        svg.attr('width',800);
        svg.attr('height',500);
        svg.style('border','2px solid #ccc');
        
    
        //黑龙江省历年理科一本线
        const data = [
            {date:'2014',score:500},
            {date:'2015',score:550},
            {date:'2016',score:510},
            {date:'2017',score:520},
            {date:'2018',score:450},
            {date:'2019',score:430},
            {date:'2020',score:470},
            {date:'2021',score:360},
            {date:'2022',score:410},
            {date:'2023',score:380}
        ];

        const xScale = d3.scaleTime()
            .domain(d3.extent(data,d=>new Date(d.date)))
            .range([0,600])

        const yScale = d3.scaleLinear()
            .domain(d3.extent(data,d=>d.score))
            .range([400,0])
            .nice();

        const xAxis = d3.axisBottom(xScale).ticks(10);
        
        svg.append('g').attr('transform','translate(50,450)').call(xAxis);


        const yAxis = d3.axisLeft(yScale);

        svg.append('g').attr('transform','translate(50,50)').call(yAxis);

        const line = d3.line(d=>xScale(new Date(d.date)) , d=>yScale(d.score) ).curve(d3.curveCatmullRom);

        svg.append('path')
            .attr('transform','translate(50,50)')
            .attr('d',line(data))
            .attr('stroke','#666')
            .attr('fill','none');

        svg.append('g')
            .attr('transform','translate(50,50)')
            .selectAll('circle')
            .data(data)
            .join('circle')
            .attr('cx',d=>xScale(new Date(d.date)))
            .attr('cy',d=>yScale(d.score))
            .attr('r',5)
            .attr('fill','steelblue');

    </script>
</body>
</html>